<template>
    <div class="box" @click='emitfn'>  <!-- 这是事件是子传父 -->


     
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"

  >
 <!-- 这个是当没有商品的时候进行显示的 -->
   <!-- <van-empty
  class="custom-image"
  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
  description="描述文字"
  v-show="off"
   /> -->


   <van-cell v-for="item in goodsList" :key="item.id"  @click="Togoodsdetails(item.id)">  <!--这里使用的是类似懒加载的插件 -->
   
       <img :src="item.list_pic_url" alt="">
       <p>{{item.name}}</p>
       <span>{{item.retail_price | formarMoney}}</span>
  
  </van-cell>
</van-list>
   <!-- 这个页面是有商品搜索页面的子组件 用来展示搜索的商品的信息 -->
  
    </div>
</template>

<script>
export default {
    name: "Goodschild",
    data() {
        return {
            number:20,   //代表页面的页数
            sum:1,   //页面的总数量
            totalPageschild:"",  //从父组件传递进来的总页数
       loading: false,    //这里是懒加载的开关
      finished: false,     //这里是懒加载的开关
    //    off:false,     //这个是当没有商品的时候进行显示
        };
    },
    // 使用props来接收从父元素传递进来的数据  props 读 普肉破死
    props:['goodsList',"totalPages","page"],   // goodsList代表商品的数据  totalPages代表总页数
    mounted(){
        setTimeout(()=>{
            this.totalPageschild=this.totalPages
            console.log( this.totalPages);
            // if(this.goodsList.length==0){
            //      this.off = true;
            // }
        },500)
    },
    methods:{
       emitfn(){
           this.$emit('transfer',this.number)
       },
       



        // List 组件通过 loading 和 finished 两个变量控制加载状态，
        // 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
        // 此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
        // 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
         onLoad() {       
      // 异步更新数据
        this.emitfn(),
           
       this.number+=10 
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
     setTimeout(() => { 
      if(this.sum < this.totalPageschild ){  //这里是判断当前的页数是否等于总的页数
                       //每调用一次就每一次的请求的条数就加20
        this.sum++                      // 每调用一次页数就加1
    //    console.log(this.number);
        console.log(this.totalPageschild);
        console.log(this.sum);
        // console.log(2222222);
        // 加载状态结束 
        this.loading = false;              
    }else{
    this.finished = true;
    }
      },1000)   
      
    },  

    Togoodsdetails(id){ 
        // console.log(id);  //这里是点击商品以后跳转到商品的详情页面
        this.$router.push({path:"/goodsdetails",query:{id:id}})
    }
    }
};
</script>

<style scoped lang='less'>
.box{
    /deep/.van-cell{
         width:50%;
         padding:0;
         float:left;
       
   }
    /deep/.van-cell__value--alone{ 
           width:100%;
           
            img{
                width:100%;
            }
            p{
                // width:170px;
                font-size:18px;
                 white-space: nowrap;
                  overflow: hidden;
                text-overflow: ellipsis;
                margin-top:10px;
            }
            span{
                font-size: 16px;
                color:red;
            }
        }
}
</style>